<template>
	<div>
		<div class="header">
			<div class="header-left">
				<img class="userimg" src="../../assets/usersImg/user-img.png" />
				<div style="margin-left: 15px; font-size: 18px; color: aliceblue">
					<h3>{{ name }}</h3>
					<span>普通用户</span>
				</div>
			</div>

			<div class="header-right">
				<div class="right-top">
					<img :src="imgUrl" style="width: 35px" />
				</div>
				<div class="right-main">
					<i class="icon"></i>
					<div class="word">
						<div class="line1">Pro会员</div>
						<div class="line2">
							立即开通
							<i class="u-icon-ucenter-arrow"></i>
						</div>
						<p>
							立即开通
							<i class="righticon"></i>
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="myassets">
			<h2 style="font-size: 20px; margin: 10px 0 10px 10px">我的资产</h2>
			<hr />
			<div style="margin-top: 5px">
				<van-grid :column-num="5" :border="false">
					<van-grid-item icon="gold-coin-o" text="余额" :dot="true" />
					<van-grid-item icon="cash-on-deliver" text="红包" />
					<van-grid-item icon="cashier-o" text="优惠券" />
					<van-grid-item icon="envelop-o" text="积分" />
					<van-grid-item icon="gift-card-o" text="礼品卡" />
				</van-grid>
			</div>
		</div>
		<div style="margin: 10px">
			<van-grid :column-num="3" :border="true">
				<van-grid-item icon="notes-o" text="我的订单" />
				<van-grid-item icon="user-circle-o" text="账号管理" />
				<van-grid-item icon="phone-o" text="我的手机号" />
				<van-grid-item icon="calendar-o" text="周六一起拼" />
				<van-grid-item icon="refund-o" text="售后服务" />
				<van-grid-item icon="cash-on-deliver" text="邀请返利" />
				<van-grid-item icon="goods-collect-o" text="优先购" />
				<van-grid-item icon="peer-pay" text="积分中心" />
				<van-grid-item icon="balance-pay" text="会员俱乐部" />
				<van-grid-item icon="logistics" text="地址管理" />
				<van-grid-item icon="pending-payment" text="支付安全" />
				<van-grid-item icon="shield-o" text="帮助与客服" />
				<van-grid-item icon="chat-o" text="意见反馈" />
				<van-grid-item icon="gift-card-o" text="我的竞拍" />
			</van-grid>
		</div>
		<div class="logout">
			<van-button plain type="danger" size="small" @click="logout">退出登录</van-button>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { showToast } from 'vant'
export default defineComponent({
	name: 'Center'
})
</script>

<script lang="ts" setup>
import { useUserStore } from '@/stores/userstore'
import { onMounted, ref } from 'vue'
import QRCode from 'qrcode'
import { ReqLogout } from '@/api/user'
import { useRouter } from 'vue-router'
const router = useRouter()
const userStore = useUserStore()
const name = ref('')
const imgUrl = ref('')
name.value = userStore.userInfo.name
// const avator = ref('')
onMounted(async () => {
	imgUrl.value = await QRCode.toDataURL('passwd')
	// getuserinfo()
})
// const getuserinfo = async () => {
// 	let res = await reqGetUserinfo()
// 	console.log(res)
// 	avator.value = res.data.headImg
// }
const logout = async () => {
	try {
		await ReqLogout()
		userStore.reset()
		showToast('退出成功')
		router.replace({
			path: '/login'
		})
	} catch (error) {
		showToast('退出失败，请稍后再试')
	}
}
</script>

<style lang="scss" scoped>
.header {
	height: 4.5rem;
	background-image: url(@/assets/usersImg/bg-center.png);
	background-size: 100%;
	background-position: bottom;
	padding-left: 0.3rem;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.right-top {
	position: absolute;
	right: 0.44rem;
	top: 1.36rem;
	width: 0.64rem;
	height: 0.64rem;
}

.userimg {
	vertical-align: middle;
	width: 1.42rem;
	height: 1.42rem;
	border-radius: 50%;
}

.header-left {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.header-right {
	position: relative;
	width: 2.6rem;
	padding-left: 0.17rem;
	height: 95%;
}

.right-main {
	margin-top: 2.64rem;
	padding: 0 0.2rem 0 0.1rem;
	white-space: nowrap;
	height: 0.84rem;
	border-top-left-radius: 0.64rem;
	border-bottom-left-radius: 0.64rem;
	overflow: hidden;
	-webkit-animation: shake 1s linear 3;
	animation: shake 1s linear 3;
	background-image: -webkit-gradient(linear,
			left top,
			left bottom,
			from(#574e44),
			to(#0e0e0e));
}

.logout {
	margin: 10px 0 50px 0;
	padding-bottom: 80px;
	text-align: center;
}

.icon {
	background-image: url('../../assets/usersImg/icon.png');
	display: inline-block;
	vertical-align: middle;
	width: 0.56rem;
	height: 1.64rem;
	background-size: 3.21rem 3.3rem;
	background-position: -0.58rem -0.66rem;
}

.word {
	display: inline-block;
	padding: 0.1rem 0;
	color: #ede7db;
	vertical-align: middle;

	.line1 {
		font-size: 0.24rem;
		line-height: 0.36rem;
		color: #f9e0c0;
	}

	.line2 {
		font-size: 0.2rem;
		line-height: 0.28rem;
		vertical-align: middle;
		color: #f9e0c0;

		.u-icon-ucenter-arrow {
			width: 0.18rem;
			height: 0.18rem;
			background-position: -2.87rem -0.48rem;
			margin-left: 0.04rem;
			margin-top: -0.04rem;
			background-image: url('../../assets/usersImg/icon.png');
			display: inline-block;
			vertical-align: middle;
			background-size: 3.21rem 2.78rem;
		}
	}
}
</style>
